<template>
   <!-- 面包屑 -->
   <el-breadcrumb separator="/">
     <el-breadcrumb-item>权限管理</el-breadcrumb-item>
     <el-breadcrumb-item>角色列表</el-breadcrumb-item>
   </el-breadcrumb>

   <!-- 表格 -->
   <el-table class="table" :data='tableData' border show-overflow-tooltip :row-key="(row: any) => row.id" :expand-row-keys="[openRowID]"  @expand-change="expandChange">
      <el-table-column type="expand" width="50">
        <template #default="scope">
           <div v-for="item in scope.row.children" class="expandItem">
              <el-row v-if="scope.row.children.length !== 0">
                <el-col :span="5" class="firstLable">
                  <el-tag closable @close="deleteTags(item.id)">{{item.authName}}</el-tag> 
                  <el-icon><CaretRight/></el-icon>
                </el-col>
                
                <el-col :span="19">
                  <el-row v-for="itemB in item.children">
                    <el-col :span="5" >
                      <el-tag type="success" closable @close="deleteTags(itemB.id)">{{itemB.authName}}</el-tag> 
                      <el-icon><CaretRight/></el-icon>
                    </el-col>

                    <el-col :span="19">
                      <el-tag style="margin-right: 5px" v-for="itemC in itemB.children" closable type="warning" @close="deleteTags(itemC.id)">{{itemC.authName}}</el-tag> 
                    </el-col>
                  </el-row>
                </el-col>
              </el-row> 
           </div>
        </template>
      </el-table-column>
      <el-table-column prop="id" label="角色ID"/>
      <el-table-column prop="roleName" label="角色名称"/>
      <el-table-column prop="roleDesc" label="角色描述"/>
      <el-table-column label="操作" width="280">
        <template #default="scopeB">
          <el-button size="small" color="#409eff" :icon="Edit" style="color: #fff" @click="showRolesDialog(true, scopeB.row.id,scopeB.row.roleName,scopeB.row.roleDesc)">编辑</el-button>
          <el-button size="small" color="#F56C6C" :icon="Delete" style="color: #fff">删除</el-button>
          <el-button size="small" color="#E6A23C" :icon="Setting" style="color: #fff" @click="() => showGiveRolesDialog(true, scopeB.row)">权限分配</el-button>
        </template>
    </el-table-column>
   </el-table>

   <!-- 编辑角色盒子 -->
   <EditRoles :EditRolesDialog="EditRolesDialog" @showRolesDialog="showRolesDialog" @init="init" :row="row"/> 

   <!-- 分配角色盒子 -->
   <GiveRoles :GiveRolesDialog="GiveRolesDialog" @showGiveRolesDialog="showGiveRolesDialog" @init="init" :row="giveRow"></GiveRoles> 
</template>

<script lang="ts" setup>
import { Edit, Delete, Setting, CaretRight } from '@element-plus/icons-vue'
import { GetRoleFnc, DeleteRoleChildrenFnc } from '@/api/roles'
import { onMounted, reactive, ref } from 'vue';

import EditRoles from './componets/EditRoles/IndexView.vue'
import GiveRoles from './componets/GiveRoles/IndexView.vue'

const tableData = ref([]) // table数据源
const row = reactive({ roleID: 0, roleName: '', roleDesc: '' }) // 每一行的row 包括roleID roleName roleDesc
const EditRolesDialog = ref(false) // 修改角色盒子
const GiveRolesDialog = ref(false) // 修改角色盒子
const openRowID = ref(0) // 展开行的ID
const giveRow = ref({}) // 分配权限的每一行row

// 数据初始化
const init = async() => { 
  const res = await GetRoleFnc()
  if(res.data.meta.status === 200) {
    tableData.value = res.data.data
  }  
}

onMounted(() => {
  init()
})

// 展开行的触发事件 展开或者隐藏
const expandChange = (rows: {id: number}) => {
  openRowID.value = rows.id
}

// 删除展开行tag 
const deleteTags = async (id: number) => {
  const res = await DeleteRoleChildrenFnc(openRowID.value, id)
  if(res.data.meta.status === 200) {
    ElMessage({type: 'success', message: '更新成功', duration: 1000, onClose: () => {
      init()
    }})
  }
}

// 关闭编辑角色的盒子 子组件使用
const showRolesDialog = (flag: boolean, id = 0, roleName = '', roleDesc = '') => {
  EditRolesDialog.value = flag
  row.roleID = id
  row.roleName = roleName
  row.roleDesc = roleDesc
}

// 关闭分配角色的盒子 子组件使用
const showGiveRolesDialog = (flag = false, row = {}) => {
  GiveRolesDialog.value = flag
  giveRow.value = row
}

</script>

<style lang="scss" scoped>
.table{
  margin-top: 30px;
  .expandItem{
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    margin-top: 10px;
    .firstLable{
      text-align: center;
    }
  }
}
</style>